
var headerCom = Vue.extend({

    data() {
        return {
            myDate: null,
            menu: [{
                name: 'Home',
                url: '/Home'
            }, {
                name: 'About',
                url: '/About'
            }, {
                name: '产品信息',
                url: '/Goods',
                children:[
                    {
                        name: 'APARTMENT',
                        url: '/Goods/apartment',
                    },
                    {
                        name: 'CONDO',
                        url: '/Goods/condo',
                    },
                    {
                        name: 'FARM',
                        url: '/Goods/farm',
                    },
                    {
                        name: 'TOWNHOUSE',
                        url: '/Goods/townhouse',
                    },
                    {
                        name: 'VILLA',
                        url: '/Goods/villa',
                    },
                    {
                        name: 'OFFICE',
                        url: '/Goods/office',
                    },
                ]
            }, {
                name: '新闻信息',
                url: '/News',
                children:[
                    {
                        name: '新闻信息A',
                        url: '/News/10001',
                    },
                    {
                        name: '新闻信息B',
                        url: '/News/10002',
                    },
                    {
                        name: '新闻信息C',
                        url: '/News/10003',
                    },
                    {
                        name: '新闻信息D',
                        url: '/News/10004',
                    },
                ]
            }, {
                name: 'Contact',
                url: '/Contact'
            }, ],
        };
    },
    mounted: function() {
        this.$nextTick(function() {//this.TouchSlide();
            this.menuData();
            this.slicknav();
            window.setInterval(this.helloTime,1000);
        });
    },
    methods: {

        menuData:function(){
            localStorage.setItem('menuData',JSON.stringify(this.menu));
        },
        slicknav:function(){
            /*****************************************************
             * Slick Nav
             * http://slicknav.com/
             *****************************************************/
            if(jQuery().slicknav ) {
                $('#site-nav > ul').slicknav({
                    prependTo: "#site-header-top + .container >.row"
                });
            }
        },
        helloTime:function (){

            var nowDate = new Date();
            nowDateH = nowDate.getHours();
            nowDateM = nowDate.getMinutes();
            nowDateS = nowDate.getSeconds();
            this.myDate = nowDateH + '时' + nowDateM + '分' + nowDateS + '秒';
            //this.myDate = new Date().getTime();
            //console.log(nowDate , this.myDate);

        }
    },
    props: [''],
    template: '\
<header id="site-header">\
    <div id="site-header-top">\
        <div class="container">\
            <div class="row">\
                <div class="col-md-5">\
                    <div class="clearfix">\
                        <button class="btn btn-warning btn-lg header-btn visible-sm pull-right">List your Property for Free</button>\
                        <p class="timing-in-header">Open Hours: Monday to Saturday - 8am to 6pm 当前时间：{{myDate}}</p>\
                    </div>\
                </div>\
                <div class="col-md-7">\
                    <div class="clearfix">\
                        <button class="btn btn-warning btn-lg header-btn hidden-sm">List your Property for Free</button>\
                        <div class="language-in-header">\
                            <i class="fa fa-globe"></i>\
                            <label for="language-dropdown"> Language:</label>\
                            <select name="currency" id="language-dropdown">\
                                <option value="ENG">ENG</option>\
                                <option value="AR">AR</option>\
                                <option value="UR">UR</option>\
                                <option value="NEO">NEO</option>\
                                <option value="AKA">AKA</option>\
                            </select>\
                        </div>\
                        <div class="currency-in-header">\
                            <i class="fa fa-flag"></i>\
                            <label for="currency-dropdown"> Currency: </label>\
                            <select name="currency" id="currency-dropdown">\
                                <option value="USD">USD</option>\
                                <option value="EUR">EUR</option>\
                                <option value="AOA">AOA</option>\
                                <option value="XCD">XCD</option>\
                                <option value="PKR">PKR</option>\
                            </select>\
                        </div>\
                    </div>\
                </div>\
            </div>\
        </div>\
    </div>\
    <div class="container">\
        <div class="row">\
            <div class="col-md-3">\
                <figure id="site-logo">\
                    <a href="index.html"><img src="assets/images/logo.png" alt="Logo"></a>\
                </figure>\
            </div>\
            <div class="col-md-6 col-sm-8">\
                <nav id="site-nav" class="nav navbar-default">\
                    <ul class="nav navbar-nav">\
                        <li v-for="item in menu"><router-link v-bind:to="item.url ">{{item.name}}</router-link></li>\
                    </ul>\
                </nav>\
            </div>\
            <div class="col-md-3 col-sm-4">\
                <div class="contact-in-header clearfix">\
                    <i class="fa fa-mobile"></i>\
                    <span>\
                        Call Us Now\
                        <br>\
                    <strong>13411173567</strong>\
                    </span>\
                </div>\
            </div>\
        </div>\
    </div>\
</header>\
',

});
